前端学习圈

小程序-03 媒体组件

一、camera 相机组件

  1. 使用camera作为标签名创建相机，需要给camera设置宽高属性；
  • mode： normal / scanCode 相机模式/扫码模式；
  • device-position： back / front 后置/前置；
  • flash： auto/on/off 自动/打开闪光灯/关闭闪光灯
  • binderror： 用户不允许使用摄像头时触发事件；
  1. wx.createCameraContext()，创建camera实例，使用以下方法： （1）takePhoto()：拍摄照片，将以下作为key-value对填写小括号里；
  • quality：high/normal/low 高质量/普通/低 成像质量；
  • success：接口调用成功的回调；
  • fail： 调用失败的回调；

（2）startRecord()：开始录像； （3）stopRecord()：结束录像；

const ctx = wx.createCameraContext();
ctx.takePhoto({
    quality: 'high',
    success: ()=>{}
})

二、audio 音频组件

  1. audio： 音频默认组件（不建议使用，建议直接创建）
  • id： audio组件的标识，用来创建wx.createAudioContext时绑定；
  • src： 音频资源地址；
  • loop：开启循环播放；
  • controls：显示默认控件，默认为false；
  • poster：音频封面地址；
  • name： 音频默认名字；
  • author： 音频作者；
  • binderror： 播放错误时触发；
  • bindplay： 开始播放时触发；
  • bindpause： 暂停时触发；
  • bindended： 播放到未尾时触发；

（1）error的code码：1 获取资源被用户禁止，2 网络错误 3 解码错误 4 不合适资源

  1. wx.createInnerAudioContext 创建一个音频；创建之后可以使用音频的属性和方法，属性通过变量.src = ''，方法：变量.play()；

  2. 可用属性

  • src： 资源地址；
  • startTime： 开始播放位置，单位s；
  • autoplay： 是否自动播放；
  • loop： 是否循环；
  • duration：当前音频的长度，单位s；（只读）
  • currentTime： 当前音频的播放位置，有6位小数点；（只读）
  • paused： 当前是否是暂停或停止状态（只读）
  • buffered： 音频缓冲的时间点；
  1. 可用方法：
  • play()： 播放；
  • pause()： 暂停；
  • stop()： 停止，会从开头开始播放；
  • seek()：跳转到指定位置，单位数字；
  • onPlay()： 监听播放事件；
  • onError()： 监听播放错误事件；
  • onWaiting()：监听音频加载事件；
  • destory()：销毁当前实例，在页面卸载时，将歌曲关闭；
  1. wx.playBackgroundAudio({})

使用后台播放器播放音乐，后台播放只能有一个音乐在播放，当用户离开小程序之后暂停播放，当使用其他小程序占用了音乐播放则停止播放；

  • dataUrl： 音乐链接
  • title： 音乐标题
  • coverImgUrl： 封面URL
  • success： 接口调用成功的回调函数

三、video 视频组件

  1. 可用属性：
  • src： 视频地址；
  • duration： 指定视频时长
  • controls： 显示默认控件，默认true；
  • autoplay： 是否自动播放；
  • loop： 是否循环播放；
  • enable-progress-gesture： 是否开启控制进度的手势；
  • enable-play-gesture： 开启双击切换播放/暂停；
  • poster： 视频封面的图片网络资源地址；
  1. 发弹幕，需要在video标签上，设置danmu-btn，显示弹幕按钮，danmu-list，赋值一个初始的数组，已有弹幕；
  2. wx.createVideoContext，创建video实例，使用控制功能，需要给video标签绑定一个id，操作对应的video组件；
  • play()： 播放视频；
  • pause()： 暂停视频；
  • stop()： 停止视频；
  • seek()： 跳转到指定位置；
  • sendDanmu()：发送弹幕；对象两个属性，text/color，弹幕文字以及弹幕颜色；
  • playbackRate()： 设置倍速播放；
  • requestFullScreen()： 进入全屏；
  • exitFullScreen()： 退出全屏；

四、navigator 页面链接

  1. 相当于a标签，可以跳转页面，默认为块标签，使用url指定跳转地址；
  2. open-type属性：
  • navigate： 对应wx.navigateTo；
  • redirect： 对应wx.redirectTo；
  • switchTab： 对应wx.switchTab；
  • reLaunch： 对应wx.reLaunch；
  • navigateBack： 对应wx.navigateBack；

五、map 地图组件

  1. 添加map标签，可用属性：
  • longitude/latitude： 经度/纬度，单位number；
  • scale： 缩放级别，取值3-20；
  • show-compass： 显示指南针
  • enable-overlooking： 开启俯视
  • enable-zoom： 开启缩放；
  • enable-scroll： 开启拖动；
  • enable-rotate： 开启旋转；
  • enable-satellite： 开启卫星图；
  • enable-traffic： 开启实时路况；